
<template>
	<view>
		<view class="page-body">
		    <view class="page-section page-section-gap">
		        <map style="width: 100%; height: 1200upx;" :controls="controls" 
					
						:scale="scale" :latitude="latitude" :longitude="longitude" :markers="covers"
						@markertap="markertap"
						@callouttap="callouttap" 
						@init="init"
						@regionchange="regionchange"
						@updated="updated"
						:enable-zoom="enableZoom"
				 >
		        </map>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mapInitTwo:false, //h5 地图二次加载索引
				enableZoom:false,
				title: 'map',
				latitude: 39.90, 
				longitude: 116.39,
				coversIconHeight:30, //撒点图片的宽高
				covers: [],
				scale:15,//地图层级
				controls:[{//在地图上显示控件，控件不随着地图移动
					id:1,//控件id
					iconPath:'../../static/images/testIcon1.png',//显示的图标	
					position:{//控件在地图的位置
						left:15,
						top:15,
						width:40,
						height:40
					},	
				}],
				// circles:[{//在地图上显示圆
				// 	latitude: 39.90,
				// 	longitude: 116.39,
				// 	fillColor:"#FFC41F",//填充颜色
				// 	color:"#12A1DD",//描边的颜色
				// 	radius:500,//半径
				// 	strokeWidth:2//描边的宽度
				// }],
				// polyline:[{//指定一系列坐标点，从数组第一项连线至最后一项
				// 	points:[
				// 		{latitude: 39.909,longitude: 116.39742},
				// 		{latitude: 39.90,longitude: 116.39},
				// 	],
				// 	color:"#0000AA",//线的颜色
				// 	width:2,//线的宽度
				// 	dottedLine:true,//是否虚线
				// 	arrowLine:true,	//带箭头的线 开发者工具暂不支持该属性
				// }],
			};
		},
		onLoad(){
			var vueThis = this;
			setTimeout(()=>{
				let coversData = [
					{id:1,name:'陈某某陈某某陈某某陈某某12341',content:'$123123411234112341',latitude:39.90,longitude:116.39},
					{id:2,name:'陈某某陈某某',content:'$321$321某陈某某',latitude:39.91,longitude:116.39},
					{id:3,name:'陈某某陈某某',content:'$321$321',latitude:39.91,longitude:116.38},
					{id:4,name:'什么什么县5号',content:'$smsmxwh',latitude:39.90,longitude:116.38},
					{id:5,name:'什么什么2县5号',content:'$smsmxwh',latitude:39.905,longitude:116.385}
				]
				let coversOtherData = {
					width:vueThis.coversIconHeight,
					height:vueThis.coversIconHeight,
					iconPath: '../../static/images/userImages.png?type=marker',	//显示的图标			
					// #ifdef MP-WEIXIN
					 label:{
						 // anchorX:-42,
						 anchorY:5,
						 // bgColor:"#fff",
						 textAlign: "center",
						 // padding:10,
						 // content:`data[0].name\ndata[0].content`,
						 color:'#007aff',
						 fontSize:14,
					 },
					 // #endif
				}
				let coversArr = [];
				coversData.forEach((item,index)=>{
					let obj = {};
					obj.id = item.id;
					obj.latitude = item.latitude;
					obj.longitude = item.longitude;
					obj.width = coversOtherData.width;
					obj.height = coversOtherData.height;
					obj.iconPath = coversOtherData.iconPath + `&id=${item.id}`;
					// #ifdef MP-WEIXIN
					obj.label = {};
					obj.label.content = item.name + '\n' + item.content;
					let anchorX = 0;
					if(vueThis.getLength(item.name) > vueThis.getLength(item.content)){
						anchorX = -((vueThis.getLength(item.name) * 3) + (coversOtherData.width / 4));
					}else{
						anchorX = -((vueThis.getLength(item.content) * 3) + (coversOtherData.width / 4));
					}
					obj.label.anchorX =  anchorX;
					console.log(obj.label.anchorX,'anchorX');
					obj.label.anchorY = coversOtherData.label.anchorY;
					obj.label.color = coversOtherData.label.color;
					// obj.label.bgColor = coversOtherData.label.bgColor;
					obj.label.textAlign = coversOtherData.label.textAlign;
					obj.label.fontSize = coversOtherData.label.fontSize;
					// #endif
					coversArr.push(obj);
				})
				
				// console.log(coversArr,'coversArr');
				vueThis.covers = coversArr;
				
			// #ifdef H5
				vueThis.$nextTick(function(){
					vueThis.h5MapStyle(coversData);
					// setTimeout(()=>{
					// 	//预防地图重载 导致图片又被刷新
					// 	var csssprite = document.querySelectorAll(".csssprite");
					// 	csssprite.forEach((item,index)=>{
					// 		if(item.getAttribute('src').indexOf('marker') != '-1'){
					// 			if(item.parentNode.getElementsByTagName('p')[0] == undefined){
					// 				this.h5MapStyle(coversData);
					// 			}
					// 		}
					// 	})
					// },1500)
				})
			// #endif
				
			},1000)

			
			
			
			
			
			// uni.getLocation({//获取当前的位置坐标
			// 	type: 'wgs84',
			// 	success: function (res) {
			// 		// vueThis.latitude = res.latitude;
			// 		// vueThis.longitude = res.longitude;
			// 		console.log('当前位置的经度：' + res.longitude);
			// 		console.log('当前位置的纬度：' + res.latitude);
			// 	}
			// });  

// 			uni.chooseLocation({
// 				success: function (res) {
// 					console.log('位置名称：' + res.name);
// 					console.log('详细地址：' + res.address);
// 					console.log('纬度：' + res.latitude);
// 					console.log('经度：' + res.longitude);
// 				}
// 			});
		},
		methods:{
			regionchange(){
				console.log('视野发生变化')
			},
			updated(){
				console.log('地图初始化完毕')
			},
			//获得字节长度 中文为2  英文数字为1
			getLength(val) {  
					var str = new String(val);  
					var bytesCount = 0;  
					for (var i = 0 ,n = str.length; i < n; i++) {  
							var c = str.charCodeAt(i);  
							if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {  
									bytesCount += 1;  
							} else {  
									bytesCount += 2;  
							}  
					}  
					return bytesCount;  
			},
			//获取链接后面的参数
			getQueryVariable(url,variable){
				var query = url;
				var vars = query.split("&");
				for (var i=0;i<vars.length;i++) {
					var pair = vars[i].split("=");
					if(pair[0] == variable){return pair[1];}
				}
				return(false);
			},
			//h5的地图撒点兼容
			h5MapStyle(coversData){
				setTimeout(()=>{
					var csssprite = document.querySelectorAll(".csssprite");
					if(csssprite.length <= 1){
						this.h5MapStyle(coversData);
						return;
					}

						csssprite.forEach((item,index)=>{
							if(item.getAttribute('src').indexOf('logo') != '-1'){
								item.style.display = 'none';
							}else if(item.getAttribute('src').indexOf('marker') != '-1'){
								let markersIndex = 0;
								coversData.forEach((item2,index2)=>{
									let url = item.getAttribute('src');
									//对比id
									if(item2.id == this.getQueryVariable(url,'id')){
										markersIndex = index2;
									}
								})
								
								item.style.borderRadius = this.coversIconHeight + 'px';
								//创建节点
								item.parentNode.style.overflow = 'initial';
			
								let dataItem = coversData[markersIndex];
								let left = 0;
								let width = 0;
								if(this.getLength(dataItem.name) > this.getLength(dataItem.content)){
									left = -(dataItem.name.length * 6) + (this.coversIconHeight / 2) + 'px';
									width = (dataItem.name.length * 6) * 2 + 'px';
								}else{
									left = -(dataItem.content.length * 6) + (this.coversIconHeight / 2) + 'px';
									width = (dataItem.content.length * 6) * 2 + 'px';
								}
			
			
			
			
								let para = document.createElement("p");
								item.after(para);
								let pNode = item.parentNode.getElementsByTagName('p')[0];
								pNode.className = 'coversIcon';
								pNode.style.position = 'absolute';
								// pNode.style.backgroundColor = '#fff';
								pNode.style.left = left;
								pNode.style.top = this.coversIconHeight + 'px';
								pNode.style.fontSize = '12px';
								pNode.style.color = '#007aff';
								pNode.style.width = width;
								pNode.style.textAlign = 'center';
								pNode.innerHTML = `<span>${dataItem.name}</span><br><span>${dataItem.content}</span>`;
							}
						})
	
				},100)
			},
			markertap(evt){
				console.log('标记点',evt)
			},
			callouttap(evt){
				console.log('标记点上面小气泡',evt)
			},
			init(){
				console.log('地图渲染完毕')
			}
		}
	}
</script>

<style lang="scss">
	.csssprite{
    border-radius: 91px !important;
	}
	.coversIcon{
		position: absolute;
    top: 50px;
    font-size: 12px;
    color: #007aff;
		// background:#fff;
	}

</style>
